import React, { useEffect } from 'react'
import { useAppSelector } from '../../store/hooks'
import { fetchList } from '../../store/quest/requestion'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'

const Index: React.FC = () => {
	const list = useAppSelector(state => state.questionReducer.list);
	const dispatch = useDispatch();
	const navigate = useNavigate();

	useEffect(() => {
		dispatch(fetchList() as any)
	}, [])
	return (
		<div>
			<ul>
				{
					list.map(v => {
						return <li 
							key={v.id} 
							style={{ padding: '10px', display: 'flex', border: '1px solid #ccc' }}
							onClick={ () => navigate('/quest/detail', { state: v }) }
						>
							<img src={v.url} alt="" />
							<h3>{ v.title }--{ v.question.length }题目</h3>
						</li>
					})
				}
			</ul>
		</div>
	)
}

export default Index